<script setup>
import HelloWorld from './components/HelloWorld.vue'
import MyDivider from './components/MyDivider.vue';
import MySelect from './components/MySelect.vue';
import MyTab from './components/MyTab.vue';
import SetupTest from './components/SetupTest.vue';
import Home from './pages/Home.vue';
import Category from './pages/Category.vue';
import { ref } from 'vue';

const active = ref(1)
</script>

<template>
  <div>
    <!-- <MySelect/>
    <MyTab/> -->
    <!-- <MyDivider/>
    <MyDivider content-position="center" color="orange"/>
    <MyDivider v-bind:dashed="true" color="red">
      <strong>警告！危险操作！</strong>
    </MyDivider>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger" size="mini">危险按钮</van-button> -->
    <!-- <SetupTest/> -->

    <!-- <Home/>
    <Category/> -->

    <!-- 5. 路由模块提供的用以显示页面的容器 -->
    <RouterView/>

    <!-- 6. 触发路由切换 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/">探索</van-tabbar-item>
      <van-tabbar-item icon="search" to="/category">目的地</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/detail">驴友</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/setting">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
